<template>
  <div id="app">
    <el-container>
      <el-header class="home-header" height="50px">
        <HomeHeader />
      </el-header>
      <!-- <el-header>车辆信息展示</el-header> -->
      <el-main style="margin-top: 45px;">
        <el-descriptions class="margin-top" :column="2" size="large" border>
          <template #title>
            <h2>订单信息</h2>
          </template>
          <el-descriptions-item>
              <template #label>
                  <div class="cell-item">
                      <el-icon>
                          <tickets />
                      </el-icon>
                      创建时间
                  </div>
              </template>
              {{ orderItem.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
              <template #label>
                  <div class="cell-item">
                      <el-icon>
                          <tickets />
                      </el-icon>
                      总付款
                  </div>
              </template>
              {{ orderItem.total }}元
          </el-descriptions-item>
          <el-descriptions-item>
              <template #label>
                  <div class="cell-item">
                      <el-icon>
                          <tickets />
                      </el-icon>
                      订单状态
                  </div>
              </template>
              <div v-if="orderItem.status == 0">进行中</div>
              <div v-else-if="orderItem.status == 1">等待检查人员检查</div>
              <div v-else-if="orderItem.status == 2">订单完成</div>
          </el-descriptions-item>
      </el-descriptions>
        <el-descriptions class="margin-top" :column="2" size="large" border>
          <template #title>
            <h2>车辆详细信息</h2>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                车名
              </div>
            </template>
            {{ carInfo.carName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                车牌号
              </div>
            </template>
            {{ carInfo.carNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                车类型
              </div>
            </template>
            <el-tag size="large">{{ carInfo.carType }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                颜色
              </div>
            </template>
            {{ carInfo.color }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                租赁价格
              </div>
            </template>
            {{ carInfo.rentPrice }}元/天
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <office-building />
                </el-icon>
                图片
              </div>
            </template>
            <img :src="getImage(carInfo.img)" style="height:106px;width:172px;">
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                押金
              </div>
            </template>
            {{ carInfo.deposit }}元
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                座位数
              </div>
            </template>
            {{ carInfo.seat }}座
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                门数
              </div>
            </template>
            {{ carInfo.door }}门
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                动力
              </div>
            </template>
            {{ carInfo.motivity }}T
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                驱动方式
              </div>
            </template>
            <div v-if="carInfo.drive == '0'">前驱</div>
            <div v-else-if="carInfo.drive == '1'">后驱</div>
            <div v-else>四驱</div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                动力来源
              </div>
            </template>
            {{ carInfo.electric == '0' ? '油车' : '电车' }}
          </el-descriptions-item>
          <div v-if="carInfo.electric == '0'">
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <tickets />
                  </el-icon>
                  变速方式
                </div>
              </template>
              {{ carInfo.auto == '0' ? '手动' : '自动' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <tickets />
                  </el-icon>
                  汽油型号
                </div>
              </template>
              {{ carInfo.petrol }}号
            </el-descriptions-item>
          </div>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                租借状态
              </div>
            </template>
            {{ carInfo.state == '0' ? '空闲' : '繁忙' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                描述
              </div>
            </template>
            {{ carInfo.description }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                入库时间
              </div>
            </template>
            {{ carInfo.createTime }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" :column="2" size="large" border v-if="checkInfo != null">
          <template #title>
            <h2>检查单信息</h2>
          </template>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <tickets />
                  </el-icon>
                  检查时间
                </div>
              </template>
              {{ checkInfo.checkDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <tickets />
                  </el-icon>
                  车况
                </div>
              </template>
              <div v-if="checkInfo.error == null">
                {{ checkInfo.error }}
              </div>
              <div v-else>
                车况良好
              </div>
            </el-descriptions-item>

        </el-descriptions>
      </el-main>

    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from 'vue'
import HomeHeader from '@/components/HomeHeader.vue';
import { useRoute } from 'vue-router';
import { getCarById, me, getOneCheckByCarId, updateCar, addOrder, getOrderById } from '@/api'
import { ElMessage } from 'element-plus'
import type { ComponentSize } from 'element-plus';
import router from '@/router';
import { el } from 'element-plus/es/locale';

const carInfo = reactive({
  carName: '',
  carNumber: '',
  carType: '',
  color: '',
  rentPrice: '',
  img: '',
  deposit: '',
  seat: '',
  door: '',
  motivity: '',
  drive: '',
  electric: '',
  auto: '',
  petrol: '',
  state: '',
  description: '',
  createTime: ''
});
let orderItem = reactive({
  id: '',
  userId: '',
  carId: '',
  deposit: '',
  rentPrice: '',
  status: ''
})
let checkInfo = reactive({})

const id = ref()

const baseURL = ref('http://localhost:8081/common')
//获取图片
const getImage = (img: any) => {
  return baseURL.value + `/download?name=${img}`
}

// 在组件挂载时初始化数据
onMounted(() => {
  const route = useRoute();
  id.value = route.params.id as string | undefined;
  orderItem.id = id.value;
  if (id.value) {
    // 发送请求 根据id查数据
    getOrderById(id.value).then((resp: { data: any; }) => {
      let data = resp.data;
      if (data.code == '50041') {
        Object.assign(orderItem, data.data);
        getCarById(orderItem.carId).then((resp: { data: any; }) => {
          let data = resp.data;
          if (data.code == '50041') {
            Object.assign(carInfo, data.data);
            getOneCheckByCarId(id.value).then((resp: { data: any; }) => {
              let data = resp.data;
              if (data.code == '50041') {
                Object.assign(checkInfo, data.data);
              } else {
                ElMessage({
                  message: data.message,
                  type: 'error'
                });
              }
            });
          } else {
            ElMessage({
              message: data.message,
              type: 'error'
            });
          }
        });
      } else {
        ElMessage({
          message: data.message,
          type: 'error'
        });
      }
    });
  }
});

const size = ref<ComponentSize>('default')

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  } as const;

  const sizeValue = size.value as "default" | "small" | "large";

  return {
    marginRight: marginMap[sizeValue] || marginMap.default,
  };
});
</script>

<style scoped>
.home-header {
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
</style>